<template>
  <div>
    <el-button>上传excel1</el-button>
    <div ref="ssHost" style="height: 500px; width: 100%; text-align: left"></div>
  </div>
</template>

<script setup lang="ts" name="excel">
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import '@grapecity/spread-sheets-vue'
import GC from '@grapecity/spread-sheets'
import '@grapecity/spread-sheets-resources-zh'
GC.Spread.Common.CultureManager.culture('zh-cn')

const ssHost: any = ref(null)
onMounted(() => {
  let workbook = new GC.Spread.Sheets.Workbook(ssHost.value)
  let sheet = workbook.getActiveSheet()
  console.log(sheet)

  const formData: Array<object> = reactive([
    { label: '姓名', value: '12' },
    { label: '年龄', value: '32' },
    { label: '性别', value: '2' },
    { label: '电话', value: '2' },
    { label: '邮箱', value: '2' },
    { label: '地址', value: '2' },
    { label: '教育背景', value: '2' },
    { label: '工作经历', value: '2' },
    { label: '技能', value: '2' }
  ])
  // 渲染表单
  formData.forEach((field, index) => {
    sheet.getCell(index, 0).value(field.label)
    sheet.getCell(index, 1).value(field.value)
  })
  console.log(workbook, ssHost, formData)
})
</script>

<style last="scss" scoped></style>
